<template>
	<view class="">
		<u-navbar :title="title" title-color="#333333" back-icon-color="#333333" :border-bottom="false">
		</u-navbar>
		<scroll-view :style="{'height':height+'px'}" :scroll-y="true" :scroll-into-view="viewid" scroll-with-animation>

			<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
			<view class="u-skeleton" v-if="loading">
				<view class="u-skeleton-fillet mt30" style="height: 500rpx; width: 750rpx;"></view>
				<view class="mt30 mr30">
					<view class="u-skeleton-fillet "
						style="height: 70rpx; width:600rpx;margin: 0 auto;margin-top: 20rpx;"></view>
				</view>
				<view class="df aic" style="flex-wrap: wrap;">
					<view v-for="item in 10">
						<view class="m30 ">
							<view class="u-skeleton-fillet " style="height: 114rpx; width: 182rpx;"></view>
							<view class="mt20">
								<view class="u-skeleton-fillet " style="width: 182rpx;height: 30rpx;"></view>
								<view class="u-skeleton-fillet  mt20" style="width: 50rpx;height: 30rpx;"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="theme-img" style="font-size: 0;">
				<u-image :src="bPlatformGroupInfo.sceneImage" width="750" mode="widthFix"></u-image>
			</view>
			<view class="df aic jcc" v-if="bPlatformGroupInfo.bgroupCategoryList.length==0"
				style="flex-direction: column;width: 100%; height: 800rpx;">
				<image src="@/static/empty/content-empty.png" style="width: 300rpx;height: 156rpx;" mode="widthFix">
				</image>
				<view class="c9 fs28 mt20">
					门店暂时还没供应这些商品，看看其他的吧
				</view>
			</view>
			<view class="container"
				:style="{'background':`linear-gradient(180deg, ${bPlatformGroupInfo.colorStart} 0%, ${bPlatformGroupInfo.colorEnd} 100%)`}"
				v-else>
			<!-- 	<view class="df aic jcsa p20">
					<view class="category-tag" @click="handleChange(index)"
						v-for="(itemClass,Itemindex) in bPlatformGroupInfo.bgroupCategoryList">
						{{itemClass.categoryName}}
					</view>
				</view> -->
				<template v-if="itemClass.bgoodsList.length" v-for="(itemClass,itemIndex) in bPlatformGroupInfo.bgroupCategoryList">
					<view class="goods" :id="`view${itemIndex}`">
						<view class="fs32 label">
							<image :src="itemClass.image" style="width: 630rpx;max-height: 400rpx;" mode="widthFix">
							</image>
						</view>
						<view class="m30">
							<template v-if="itemClass.goodsSort==1">
								<view class="" v-for="(item,index) in itemClass.bgoodsList" :key="index">
									<view class="" v-for="(lab,val) in item.platformGoodsSpecMix">
										<view class="cert-box-item df pr mb20">
											<image @click="handleDetail(lab,itemIndex,index)" :src="lab.image&&lab.image.split(',')[0]"
												style="width: 150rpx;height: 150rpx;border-radius: 10rpx;">
											</image>
											<view class="ml20 ">
												<view @click="handleDetail(lab,itemIndex,index)" class="title u-line-2 df aic "
													>
													{{lab.customGoodsName}}
												</view>
												<view class="mt10 df aic jcsb" @click="handleDetail(lab,itemIndex,index)">
													<view class="mt5 fs24 c6 dtsb">
														{{lab.specName}}
													</view>
													<!-- <view class="fs22">
													<text class="c6">产地:</text><text
														class="c3">{{lab.place||'--'}}</text>
												</view> -->
												</view>
												<view class="mt5 df aic  jcsb" @click="handleDetail(lab,itemIndex,index)">
													<view class="price-box " v-if="TOKEN">
														<text class="price fs24" style="font-size: 24rpx;">￥</text>
														<text class="price fwb" v-if="!item.startTime">{{lab.platformPrice}}</text>
														<text class="price fwb" v-else>{{ (!$common.calcTime(item.startTime,item.endTime) )&& lab.stock<=0?'待报价':lab.platformPrice||0}}
														</text>
													</view>
													<view class="price-box u-skeleton-fillet df " v-else>
														<text class="price fwb ">登录可见价格</text>
													</view>
													<view class="fs24 " v-if="lab.referencePrice&& !((!$common.calcTime(item.startTime,item.endTime) )&& lab.stock<=0)">
														单价：{{lab.referencePrice}}元/{{lab.referenceUnit}}
													</view>
													<view class="one_price_content" v-else></view>
													<view class="fs24" v-if="TOKEN">
														<view class="" v-if="lab.stock && lab.stock>0">
															<text  class="c6 ">库存:</text><text class="c3">{{lab.stock}}</text>
														</view>
														<view class="orange" v-else>
															<text >库存紧张</text>
														</view>
													</view>
													<view class="fs22 mt2" v-if="lab.startSaleNumStr">
														<text class="c6">起批量:</text><text
															class="c3">{{item.startSaleNumStr||'--'}}起批</text>
													</view>
												</view>
												<!-- <view class="mt8" v-if="bPlatformGroupInfo.isPreSale==0">
													<zm-number-box @change="valChange($event,lab)" size="40" :min="0"
														v-model="lab.purNum"></zm-number-box>
												</view> -->
											</view>

										</view>
									</view>
								</view>
							</template>
							<!-- 一行多个 -->
							<template v-if="itemClass.goodsSort==2">
								<view class="df aic jcsb goods-item-2" style="flex-wrap: wrap;">
									<view class="goods-item-col-2" v-for="(item,index) in itemClass.bgoodsList">
										<view class="" v-for="(lab,val) in item.platformGoodsSpecMix">
											<template >
												<image @click="handleDetail(lab,itemIndex,index)" :src="lab.image&&lab.image.split(',')[0]"
													style="width: 319rpx;height: 200rpx;border-radius: 10rpx;"></image>

												<view class="c3 fwb fs26  df aic mt8 " @click="handleDetail(lab,itemIndex,index)">
													<view class="u-line-2" style="width: 310rpx;">
														{{lab.customGoodsName}}
													</view>
												</view>
												<view class="mt20 fs24 c6 dtsb" @click="handleDetail(lab,itemIndex,index)">
													{{lab.specName}}
												</view>
												<view class="fs24 " v-if="lab.referencePrice&&!((!$common.calcTime(item.startTime,item.endTime) )&& lab.stock<=0)">
													单价：{{lab.referencePrice}}元/{{lab.referenceUnit}}
												</view>
												<view class="one_price_content" v-else></view>
												<view class="mt5 df aic  jcsb" style="height: 55rpx;">
													<view class="price-box " v-if="TOKEN">
														<text class="price fs24" style="font-size: 24rpx;">￥</text>
														<!-- <text class="price fwb">{{lab.platformPrice||0}}</text> -->
														<text class="price fwb" v-if="!item.startTime">{{lab.platformPrice}}</text>
														<text class="price fwb" v-else>{{ (!$common.calcTime(item.startTime,item.endTime) )&& lab.stock<=0?'待报价':lab.platformPrice||0}}</text>
													</view>
													<view class="price-box u-skeleton-fillet df " v-else>
														<text class="price fwb fs24" style="font-size: 24rpx;">登录可见价格</text>
													</view>
													<view class="fs24" v-if="TOKEN">
														<view class="" v-if="lab.stock && lab.stock>0">
															<text  class="c6 ">库存:</text><text class="c3">{{lab.stock}}</text>
														</view>
														<view class="orange" v-else>
															<text >库存紧张</text>
														</view>
													</view>
												</view>
											</template>
											<view class="df aic jcsb">
												<!-- <view class="fs22">
												<text class="c6">产地:</text><text class="c3">{{item.place||'--'}}</text>
											</view> -->
												
												<view class="fs22 mt2" v-if="item.startSaleNumStr">
													<text class="c6">起批量:</text><text
														class="c3">{{item.startSaleNumStr||'--'}}起批</text>
												</view>
											</view>
											<!-- <view class="mt8" v-if="bPlatformGroupInfo.isPreSale==0">
												<zm-number-box @change="valChange($event,lab)" size="40" :min="0"
													v-model="lab.purNum"></zm-number-box>
											</view> -->
										</view>


									</view>
								</view>
							</template>
							<template v-if="itemClass.goodsSort==3">
								<view class="df aic jcsb goods-item" style="flex-wrap: wrap;">
									<view class="goods-item-col" v-for="(item,index) in itemClass.bgoodsList">
										<view class="" v-for="(lab,val) in item.platformGoodsSpecMix">
											<image @click="handleDetail(lab,itemIndex,index)"
												:src="lab.image&&lab.image.split(',')[0]"
												style="width: 200rpx;height: 200rpx;border-radius: 15rpx;"></image>

											<view class="c3 fwb fs26  df aic mt8 " @click="handleDetail(lab,itemIndex,index)">

												<view class="u-line-2" style="width: 200rpx;">{{lab.customGoodsName}}
												</view>
											</view>
											<view class="mt20 fs24 c6 dtsb" 
												@click="handleDetail(lab,itemIndex,index)">
												{{lab.specName}}
											</view>
											<view class="fs24 " v-if="lab.referencePrice&&!((!$common.calcTime(item.startTime,item.endTime) )&& lab.stock<=0)">
												单价：{{lab.referencePrice}}元/{{lab.referenceUnit}}
											</view>
											<view class="one_price_content" v-else></view>
											<view class="mt5 df aic  jcsb" style="height: 55rpx;"
												@click="handleDetail(lab,itemIndex,index)">
												<view class="price-box " v-if="TOKEN">
													<text class="price fs24" style="font-size: 24rpx;">￥</text>
													<!-- <text class="price fwb">{{lab.platformPrice||0}}</text> -->
													<text class="price fwb" v-if="!item.startTime">{{lab.platformPrice}}</text>
													<text class="price fwb" v-else>{{ (!$common.calcTime(item.startTime,item.endTime) )&& lab.stock<=0?'待报价':lab.platformPrice||0}}</text>
												</view>
												<view class="price-box u-skeleton-fillet df " v-else>
													<text class="price fwb fs24" style="font-size: 24rpx;">登录可见价格</text>
												</view>
											</view>
											<!-- <view class="fs22">
												<text class="c6">产地:</text><text class="c3">{{item.place||'--'}}</text>
											</view> -->
											<view class="fs24" v-if="TOKEN">
												<view class="" v-if="lab.stock && lab.stock>0">
													<text  class="c6 ">库存:</text><text class="c3">{{lab.stock}}</text>
												</view>
												<view class="orange" v-else>
													<text >库存紧张</text>
												</view>
											</view>
											<view class="fs22 mt2" v-if="item.startSaleNumStr">
												<text class="c6">起批量:</text><text
													class="c3">{{item.startSaleNumStr||'--'}}起批</text>
											</view>
											<!-- <view class="mt8" v-if="bPlatformGroupInfo.isPreSale==0">
												<zm-number-box @change="valChange($event,lab)" size="40" :min="0"
													v-model="lab.purNum"></zm-number-box>
											</view> -->

										</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</template>
			</view>
			<!-- <payBtn @add="handleOrder" v-if="bPlatformGroupInfo.isPreSale==0"></payBtn> -->
			<ModalMsg v-model="showAddress" confirmName="请选择收货地址" @confirm="chooseAddress" :showCancel="false">
				<view class="address-desc mt30 fs26 c3 u-text-center">
					以下地址为附近定位，请选择您的收货地址
					<view class="localtion df aic jcc app-theme fs22 mt30 u-text-center">
						<nmr-icon name="dingwei-3" size="22" color="#48A147"></nmr-icon>
						{{LOCATION.name||''}}
					</view>
				</view>
			</ModalMsg>
		</scroll-view>
	</view>
</template>

<script>
	import payBtn from './components/payBtn.vue'
	import ModalMsg from '@/components/ModalMsg.vue'
	import {
		bPlatformGroupbInfo
	} from '@/api/goods.js'
	export default {
		components: {
			payBtn,
			ModalMsg
		},
		data() {
			return {
				viewid: '',
				loading: true,
				goodsCarList: [],
				menuGoods: [],
				isCartChange: false, //是否是购物袋修改
				currentIndex: 0,
				platformGroupId: '',
				title: '',
				bPlatformGroupInfo: {
					sceneImage: '',
					bgroupCategoryList: []
				},
				height: '100vh',
				showAddress: false,
				calcGoodsList: '',
				cityId:'',
				areaId:'',
			}
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.screenHeight - (res.platform == 'ios' ? 44 : 48) - res.statusBarHeight
				}
			});
		},
		onShow() {
			this.bPlatformGroup()
			// this.clacGoodsSet()
		},
		onLoad(e) {
			this.platformGroupId = e.platformGroupId
			if(e.cityId){
				this.cityId = e.cityId
				this.areaId =  e.areaId||''
				
			}else{
				this.areaId =  this.LOCATION.areaId||''
				this.cityId = this.LOCATION.areaId&&this.LOCATION.areaId.toString().substring(0, 4) + '00'||''
			}
		},
		onShareTimeline() {
			let path = `platformGroupId=${this.bPlatformGroupInfo.platformGroupId}&cityId=${this.cityId}&areaId=${this.areaId}`
			return {
				title: this.bPlatformGroupInfo.shareText||this.APPSHARE.title,
				query:path,
				imageUrl: this.bPlatformGroupInfo.shareImage||this.APPSHARE.imageUrl
			}
		},
		
		onShareAppMessage() {
			let path = `/pages/theme/themeIndex?platformGroupId=${this.bPlatformGroupInfo.platformGroupId}&cityId=${this.cityId}&areaId=${this.areaId}`
			return {
				title: this.bPlatformGroupInfo.shareText||this.APPSHARE.title,
				path: path,
				imageUrl: this.bPlatformGroupInfo.shareImage||this.APPSHARE.imageUrl
			}
		},
		methods: {
			chooseAddress() {
				uni.navigateTo({
					url: `/pages/my/address/address?source=theme&isShopCart=true&goodsList=${this.calcGoodsList}`
				})
			},
			valChange(val, item) {
				item.platformGoodsSpecMix[0].purNum = val
			},
			handleOrder() {
				let goodsList = []
				this.menuGoods.forEach((e => {
					e.bgoodsList.forEach(item => {
						if (item.platformGoodsSpecMix[0].purNum) {
							item.platformGoodsSpecMix[0].checkFlag = true
							goodsList.push(item.platformGoodsSpecMix[0])
						}
					})
				}))
				if (goodsList.length == 0) {
					this.$u.toast('必须下单一种商品！')
				} else if (goodsList.length !== 1) {
					this.$u.toast('只能下单一种商品！')
				} else {
					this.calcGoodsList = encodeURIComponent(JSON.stringify(goodsList))
					if (!this.LOCATION.addressId) {
						this.showAddress = true
					} else {
						uni.navigateTo({
							url: `/pages/confirm/index?flag=theme&goodsList=${this.calcGoodsList}&addressId=${this.LOCATION.addressId}`
						})
					}

				}
			},

			handleChange(e) {
				console.log(e)
				this.viewid = 'view' + e
				console.log(this.viewid)
			},
			bPlatformGroup() {
				bPlatformGroupbInfo({
					platformGroupId: this.platformGroupId,
					cityId: this.LOCATION.areaId&&this.LOCATION.areaId.toString().substring(0, 4) + '00'||this.cityId||'',
					areaId:this.areaId||''
				}).then(res => {
					if (res.code == 200) {
						this.title = res.data.groupName
						this.bPlatformGroupInfo = res.data
						this.menuGoods = res.data.bgroupCategoryList
						this.menuGoods.forEach((e => {
							e.bgoodsList.forEach(item => {
								this.$set(item.platformGoodsSpecMix[0], 'purNum', 0)
							})
						}))
						this.loading = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			handleDetail(e,itemIndex,index) {
				let startTime = this.bPlatformGroupInfo.bgroupCategoryList[itemIndex].bgoodsList[index].startTime
				let endTime = this.bPlatformGroupInfo.bgroupCategoryList[itemIndex].bgoodsList[index].endTime
				if(this.bPlatformGroupInfo.isPreSale==1&&!this.$common.calcTime(startTime,endTime)){//预售单
					uni.navigateTo({
						url: '/pages/goods/detail?source=theme&id=' + e.platformGoodsId + '&platformGoodsSpecMixId=' +
							e.platformGoodsSpecMixId
					})
				}else{
					uni.navigateTo({
						url: '/pages/goods/detail?id=' + e.platformGoodsId
					})
				}
				
			}
		}
	}
</script>
<style lang="scss">
	.theme-img {
		.u-image {
			min-height: 500rpx !important;
		}
	}
</style>
<style lang="scss" scoped>
	/deep/ .num-box {
		justify-content: flex-end !important;
	}

	.label {
		text-align: center;
		color: #D63925;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		// background-image: url('../../static/index/label-bg.png');
		background-size: 100%;
		background-repeat: no-repeat;

	}

	.goods {
		padding: 20rpx 0;

	}

	.cert-box-item {
		background-color: white;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		&:last-child {
			border-bottom-width: 0;
		}

		.title {
			width: 460rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 36rpx;
			// height: 74rpx;
		}

		.price-box {
			>.price {
				color: #EF2929;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
			}

			>.unit {}

			>.old-price {
				color: #999999;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				text-decoration: line-through;
			}
		}
	}

	.md {
		color: #FF4500;
	}

	.goods-item::after {
		content: "";
		width: 216rpx;
	}

	.goods-item-2::after {
		content: "";
		width: 335rpx;
	}

	.goods-item-col-2 {
		background-color: white;
		padding: 8rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 30rpx;
		width: 335rpx;
		// margin-right: 20rpx;
	}

	.goods-item-col {
		background-color: white;
		padding: 8rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 30rpx;
		width: 216rpx;
		// margin-right: 20rpx;
	}

	.price {
		color: #EF2929;
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
	}

	.category-tag {
		background: linear-gradient(180deg, #BD1018 0%, #E82318 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #FFE068;
		padding: 6rpx 11rpx;
		font-size: 26rpx;
		color: white;
	}

	.dtsb {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #EF2929;
		line-height: 32rpx;
		box-sizing: border-box;
		padding: 1rpx 10rpx;
		background: #FFF4F0;
		border-radius: 19rpx;
		border: 2rpx solid #EF2929;
		margin-bottom: 5rpx;
		text-align: center;
		display: inline-block;
		background: #FDEFEF;
	}
	.one_price_content{
		height:33rpx ;
	}
</style>